<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="dialogFlag"
			width="1200px"
			append-to-body
			center
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="140px"
			>
				<el-card
					class="box-card"
					style="margin-bottom: 20px; padding-bottom: 40px"
				>
					<div slot="header" class="clearfix">
						<span>{{ $t('employment_information') }}</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="8" v-if="fieldConfig.employmentForm">
							<el-form-item
								:label="$t('employment_type')"
								prop="employmentForm"
							>
								<el-select
									v-model="form.employmentForm"
									:placeholder="
										$t('please_select', {
											name: $t('employment_type'),
										})
									"
								>
									<el-option
										v-for="dict in dict.type
											.employment_type"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.workNo">
							<el-form-item
								:label="$t('employee_number')"
								prop="workNo"
							>
								<el-input
									v-model="form.workNo"
									:placeholder="
										$t('please_enter', {
											name: $t('employee_number'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.employeeStatus">
							<el-form-item
								:label="$t('employment_status')"
								prop="employeeStatus"
							>
								<el-select
									v-model="form.employeeStatus"
									:placeholder="
										$t('please_enter', {
											name: $t('employment_status'),
										})
									"
								>
									<el-option
										v-for="dict in dict.type.job_status"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.entryDate">
							<el-form-item
								:label="$t('date_of_hire')"
								prop="entryDate"
							>
								<el-date-picker
									clearable
									@change="entryDateChange"
									v-model="form.entryDate"
									type="date"
									value-format="yyyy-MM-dd"
									:placeholder="
										$t('please_select', {
											name: $t('date_of_hire'),
										})
									"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.probationPeriod">
							<el-form-item
								:label="$t('probation_period')"
								prop="probationPeriod"
							>
								<el-input
									@input="probationPeriodChange"
									v-model="form.probationPeriod"
									:placeholder="
										$t('please_enter', {
											name: $t('probation_period'),
										})
									"
								>
									<template slot="append"> 月 </template>
									<!-- <el-select
                    @change="probationPeriodChange"
                    slot="append"
                    v-model="form.probationUnit"
                    :placeholder="$t('please_select', { name: '' })"
                    style="width: 70px"
                  >
                    <el-option
                      v-for="dict in dict.type.day_unit"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select> -->
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.confirmationDate">
							<el-form-item
								:label="$t('permanent_employment')"
								prop="confirmationDate"
							>
								<el-date-picker
									clearable
									:disabled="false"
									v-model="form.confirmationDate"
									type="date"
									value-format="yyyy-MM-dd"
									:placeholder="
										$t('please_select', {
											name: `${$t(
												'permanent_employment'
											)}&${$t('date_of_hire')}`,
										})
									"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.separationDate">
							<el-form-item
								:label="$t('resignation_date')"
								prop="separationDate"
							>
								<el-date-picker
									clearable
									v-model="form.separationDate"
									type="date"
									value-format="yyyy-MM-dd"
									:placeholder="
										$t('please_select', {
											name: $t('resignation_date'),
										})
									"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.seniority">
							<el-form-item
								:label="$t('seniority')"
								prop="seniority"
							>
								<el-input
									disabled
									v-model="form.seniority"
									:placeholder="
										$t('please_select', {
											name: $t('date_of_hire'),
										})
									"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8" v-if="fieldConfig.employerId">
							<el-form-item
								:label="$t('employing_company')"
								prop="employerId"
							>
								<employerSelect
									v-model="form.employerId"
									:disabled="type == 0"
									@change="employerSelectChange"
								></employerSelect>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.position">
							<el-form-item
								:label="$t('position')"
								prop="position"
							>
								<el-select
									v-model="form.position"
									filterable
									:placeholder="
										$t('please_select', {
											name: $t('position'),
										})
									"
									clearable
								>
									<el-option
										v-for="item in positionOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.empClass">
							<el-form-item :label="$t('rank')" prop="empClass">
								<el-select
									v-model="form.empClass"
									filterable
									:placeholder="
										$t('please_select', {
											name: $t('rank'),
										})
									"
									clearable
								>
									<el-option
										v-for="item in positionGradeOptions"
										:key="item.id"
										:label="item.rankName"
										:value="item.id"
									>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.division">
							<el-form-item
								:label="$t('division')"
								prop="division"
							>
								<treeselect
									:normalizer="normalizer"
									v-model="form.division"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('division'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.department">
							<el-form-item
								:label="$t('department')"
								prop="department"
							>
								<treeselect
									:normalizer="normalizer"
									v-model="form.department"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('department'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.branch">
							<el-form-item :label="$t('branch')" prop="branch">
								<treeselect
									:normalizer="normalizer"
									v-model="form.branch"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('branch'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.team">
							<el-form-item :label="$t('team')" prop="team">
								<treeselect
									:normalizer="normalizer"
									v-model="form.team"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('team'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col
							:span="8"
							v-if="fieldConfig.immediateSupervisor"
						>
							<el-form-item
								:label="$t('immediate_supervisor')"
								prop="immediateSupervisor"
							>
								<el-select
									clearable
									v-model="form.immediateSupervisor"
									filterable
									:placeholder="
										$t('please_select', {
											name: $t('immediate_supervisor'),
										})
									"
								>
									<el-option
										v-for="(
											item, index
										) of immediateSupervisorList"
										:key="index"
										:label="item.employeeName"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8" v-if="fieldConfig.region">
							<el-form-item :label="$t('region')" prop="region">
								<treeselect
									:normalizer="normalizer"
									v-model="form.region"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('region'),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.costCenter">
							<el-form-item
								:label="$t('cost_center')"
								prop="costCenter"
							>
								<treeselect
									:normalizer="normalizer"
									v-model="form.costCenter"
									:options="deptOptions"
									:show-count="true"
									:placeholder="
										$t('please_select', {
											name: $t('cost_center'),
										})
									"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8" v-if="fieldConfig.professional">
							<el-form-item
								:label="$t('national_professional_title')"
								prop="professional"
							>
								<el-input
									v-model="form.professional"
									:placeholder="
										$t('please_select', {
											name: $t(
												'national_professional_title'
											),
										})
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.firstTimeWork">
							<el-form-item
								:label="$t('date_of_first_employment')"
								prop=""
							>
								<el-date-picker
									@change="changeLegalSeniority"
									clearable
									v-model="form.firstTimeWork"
									type="date"
									value-format="yyyy-MM-dd"
									:placeholder="
										$t('please_select', {
											name: $t(
												'date_of_first_employment'
											),
										})
									"
								>
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="fieldConfig.legalSeniority">
							<el-form-item
								:label="$t('mainland_china')"
								prop="legalSeniority"
							>
								<el-input
									disabled
									v-model="form.legalSeniority"
									:placeholder="
										$t('please_select', {
											name: $t('mainland_china'),
										})
									"
								>
									<template slot="append">{{
										$t('month')
									}}</template>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item :label="$t('remarks')" prop="remark">
								<el-input
									v-model="form.remark"
									type="textarea"
									:rows="3"
									:show-word-limit="true"
									:placeholder="
										$t('please_enter', {
											name: $t('remarks'),
										})
									"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card" style="margin-bottom: 20px">
					<div slot="header" class="clearfix">
						<span>{{ $t('payroll_information') }}</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item
								:label="$t('payroll_type')"
								prop="salaryForm"
							>
								<el-select
									v-model="form.salaryForm"
									:placeholder="
										$t('please_select', {
											name: $t('payroll_type'),
										})
									"
								>
									<el-option
										v-for="dict in dict.type.salary_type"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								:label="$t('settlement_currency')"
								prop="calculationCurrency"
							>
								<el-select
									v-model="form.calculationCurrency"
									:placeholder="
										$t('please_select', {
											name: $t('settlement_currency'),
										})
									"
								>
									<el-option
										v-for="dict in dict.type.currency_type"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="mb8">
						<el-col :span="1.5">
							<el-button
								type="primary"
								icon="el-icon-plus"
								size="mini"
								@click="handleAddPayInfo(1)"
								>{{ $t('add') }}</el-button
							>
						</el-col>
					</el-row>
					<el-table :data="fixedList" border :max-height="tableHeight">
						<el-table-column
							align="center"
							:label="$t('fixed_salary')"
						>
							<el-table-column
								:label="$t('pay_item')"
								prop="name"
								:show-overflow-tooltip="true"
							/>
							<el-table-column
								:label="$t('payment_amount')"
								prop="remuneration"
							/>
							<el-table-column
								:label="$t('effective_date')"
								prop="effectiveDate"
							/>
							<el-table-column
								:label="$t('expiry_date')"
								prop="expirationDate"
							/>
							<el-table-column :label="$t('status')" width="150">
								<template slot-scope="scope">
									{{ getStatusText(scope.row) }}
								</template>
							</el-table-column>
							<el-table-column
								:label="$t('remarks')"
								prop="remark"
								:show-overflow-tooltip="true"
							/>
							<el-table-column :label="$t('action')" width="180">
								<template slot-scope="scope">
									<el-button
										size="mini"
										type="text"
										@click="
											handleUpdatePayInfo(
												scope.row,
												scope.$index
											)
										"
										>{{ $t('edit') }}</el-button
									>
									<el-button
										size="mini"
										type="text"
										@click="
											handleDeletePayInfo(scope.$index, 1)
										"
										>{{ $t('delete') }}</el-button
									>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
					<el-row :gutter="10" class="mb8" style="margin-top: 20px">
						<el-col :span="1.5">
							<el-button
								type="primary"
								icon="el-icon-plus"
								size="mini"
								@click="handleAddPayInfo(2)"
								>{{ $t('add') }}</el-button
							>
						</el-col>
					</el-row>
					<el-table :data="nonFixedList" border>
						<el-table-column
							align="center"
							:label="$t('variable_pay')"
						>
							<el-table-column
								:label="$t('pay_item')"
								prop="name"
								:show-overflow-tooltip="true"
							/>
							<el-table-column
								:label="$t('payment_amount')"
								prop="remuneration"
							/>
							<el-table-column
								:label="$t('effective_date')"
								prop="effectiveDate"
							/>
							<el-table-column
								:label="$t('expiry_date')"
								prop="expirationDate"
							/>
							<el-table-column
								:label="$t('remarks')"
								prop="remark"
								:show-overflow-tooltip="true"
							/>
							<el-table-column :label="$t('action')" width="180">
								<template slot-scope="scope">
									<el-button
										size="mini"
										type="text"
										@click="
											handleUpdatePayInfo(
												scope.row,
												scope.$index
											)
										"
										>{{ $t('edit') }}</el-button
									>
									<el-button
										size="mini"
										type="text"
										@click="
											handleDeletePayInfo(scope.$index, 2)
										"
										>{{ $t('delete') }}</el-button
									>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
				</el-card>
				<el-card class="box-card" style="margin-bottom: 20px">
					<div slot="header" class="clearfix">
						<span>{{ $t('settings') }}</span>
					</div>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item
								:label="$t('affiliated_payroll_group')"
								prop="compensationGroup"
							>
								<el-select
									v-model="form.compensationGroup"
									:placeholder="
										$t('please_select', {
											name: $t(
												'affiliated_payroll_group'
											),
										})
									"
									@change="compensationGroupChange"
								>
									<el-option
										v-for="dict in payGroupListOption"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								:label="$t('affiliated_performance_group')"
								prop="performanceGroup"
							>
								<el-select
									v-model="form.performanceGroup"
									:placeholder="
										$t('please_select', {
											name: $t(
												'affiliated_performance_group'
											),
										})
									"
									@change="performanceGroupChange"
								>
									<el-option
										v-for="dict in performanceGroupOption"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item
								:label="$t('affiliated_leave_group')"
								prop="vacationGroup"
							>
								<el-select
									v-model="form.vacationGroup"
									:placeholder="
										$t('please_select', {
											name: $t('affiliated_leave_group'),
										})
									"
									@change="vacationGroupChange"
								>
									<el-option
										v-for="dict in vacationGroupOption"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item
								:label="$t('affiliated_attendance_group')"
								prop="attendanceGroup"
							>
								<el-select
									v-model="form.attendanceGroup"
									:placeholder="
										$t('please_select', {
											name: $t(
												'affiliated_attendance_group'
											),
										})
									"
									@change="attendanceGroupChange"
								>
									<el-option
										v-for="dict in checkWorkGroupOption"
										:key="dict.value"
										:label="dict.label"
										:value="dict.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('confirm')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancel') }}</el-button>
			</div>
		</el-dialog>

		<payInfoEdit
			ref="payInfoEdit"
			@setPayInfoForm="setPayInfoForm"
		></payInfoEdit>
	</div>
</template>
<script>
import {
	getPositionList,
	getEmployerSalaryGroup,
	getEmployerPerformanceGroup,
	getEmployerVacationGroup,
	getCheckWorkGroupList,
	pageListByEmployer,
} from '@/api/custom/employeeList';
import { deptTreeSelect } from '@/api/system/user';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import Treeselect from '@riophae/vue-treeselect';
import employerSelect from '@/views/components/custom/employerSelect.vue';
import payInfoEdit from './payInfoEdit.vue';
import moment from 'moment';
function diffYears(date) {
    const currentDate = moment();
    const inputDate = moment(date);

    // 检查输入的日期是否有效
    if (!inputDate.isValid()) {
        throw new Error('Invalid date provided');
    }

    // 计算年份差并保留两位小数
    const yearsDiff = currentDate.diff(inputDate, 'years', true);

    // 对年份差进行四舍五入并保留两位小数
    const roundedYearsDiff = Math.round(yearsDiff * 100) / 100;

    return roundedYearsDiff;
}
// function diffYears(date) {
// 	const currentDate = moment();
// 	const inputDate = moment(date);

// 	// 检查输入的日期是否有效
// 	if (!inputDate.isValid()) {
// 		throw new Error('Invalid date provided');
// 	}

// 	// 计算年份差
// 	const yearsDiff = currentDate.diff(inputDate, 'years');

// 	return yearsDiff;
// }
export default {
	name: 'Employee',
	dicts: [
		'job_status',
		'employment_type',
		'salary_type',
		'currency_type',
		'day_unit',
	],
	components: {
		employerSelect,
		payInfoEdit,
		Treeselect,
	},
	props: {
		empId: null,
		type: null,
		fieldConfig: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			dialogFlag: false,
			// 表单参数
			form: {
				seniority: '',
			},
			immediateSupervisorList: [],
			// 表单校验
			rules: {
				probationPeriod: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('probation_period'),
						}),
						trigger: 'change',
					},
					{
						pattern: /^(?:0|(?:-?[1-9]\d*))$/,
						message: this.$t('correct_format'),
						trigger: 'blur',
					},
				],
				employmentForm: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('employment_type'),
						}),
						trigger: 'blur',
					},
				],
				workNo: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('employee_number'),
						}),
						trigger: 'blur',
					},
				],
				employeeStatus: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('employment_status'),
						}),
						trigger: 'change',
					},
				],
				entryDate: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('date_of_hire'),
						}),
						trigger: 'change',
					},
				],
				employerId: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('employing_company'),
						}),
						trigger: 'change',
					},
				],
				firstTimeWork: [
					{
						required: true,
						message: this.$t('cannot_empty', {
							name: this.$t('date_of_first_employment'),
						}),
						trigger: 'change',
					},
				],
			},
			fixedList: [], //固定薪资
			nonFixedList: [], //非固定薪资

			// 部门树选项
			deptOptions: [],
			//职位
			positionOptions: [],
			//阶级
			positionGradeOptions: [],

			payGroupListOption: [],
			performanceGroupOption: [],
			vacationGroupOption: [],
			checkWorkGroupOption: [],
		};
	},
	watch: {
		'form.position': {
			handler(val) {
				this.getPositionGrade();
			},
			immediate: true,
		},
	},
	created() {
		this.getPositionList();
	},
	mounted() {},
	methods: {
		probationPeriodChange() {
			// if (!this.form.probationPeriod) {
			//     return;
			// }
			// let s = this.form.entryDate.split('-');
			// let yy = parseInt(s[0]);
			// let mm = parseInt(s[1]);
			// let dd = parseInt(s[2]);
			// let dt = new Date(yy, mm, dd);
			// let num = dt.getMonth() + parseInt(this.form.probationPeriod);
			// if (num / 12 > 1) {
			//     yy += Math.floor(num / 12);
			//     mm = num % 12;
			// } else {
			//     mm += parseInt(this.form.probationPeriod);
			// }
			// this.form.confirmationDate = `${yy}-${mm}-${dd}`;
			// if (!this.form.probationPeriod) {
			// 	return;
			// }
			if (!this.form.probationPeriod) {
				return;
			}

			// 解构赋值提取年、月、日
			let [yy, mm, dd] = this.form.entryDate.split('-').map(Number);

			// 创建入职日期的 Date 对象
			let entryDate = new Date(yy, mm - 1, dd);

			// 获取试用期月数
			let probationPeriod = parseInt(this.form.probationPeriod);

			// 计算确认日期
			let confirmationDate = new Date(entryDate);
			confirmationDate.setMonth(
				confirmationDate.getMonth() + probationPeriod
			);

			// 如果确认日期的天数与入职日期的天数不同，则将确认日期设置为下一个月的第一天
			if (confirmationDate.getDate() !== dd) {
				confirmationDate.setDate(1);
			}

			// 更新确认日期
			this.form.confirmationDate = `${confirmationDate.getFullYear()}-${
				confirmationDate.getMonth() + 1
			}-${confirmationDate.getDate()}`;
		},
		entryDateChange(val) {
			const diffValue = new Date().getTime() - new Date(val).getTime();
			const minute = 1000 * 60;
			const hour = minute * 60;
			const day = hour * 24;
			const month = day * 31;
			const year = month * 12;

			// const _year = diffValue / year;
			const _year = diffYears(val);
			console.log("🐛 ~ entryDateChange ~ _year:", _year)

			// Math.round(_year) === -0 ? 0 : Math.round(_year)

			this.$set(this.form,'seniority',_year
			);
			this.probationPeriodChange();
		},
		compensationGroupChange(val) {
			let find = this.payGroupListOption.find(
				(item) => item.value == val
			);
			this.form.compensationGroupName = find.label;
		},
		performanceGroupChange(val) {
			let find = this.performanceGroupOption.find(
				(item) => item.value == val
			);
			this.form.performanceGroupName = find.label;
		},
		vacationGroupChange(val) {
			let find = this.vacationGroupOption.find(
				(item) => item.value == val
			);
			this.form.vacationGroupName = find.label;
		},
		attendanceGroupChange(val) {
			let find = this.checkWorkGroupOption.find(
				(item) => item.value == val
			);
			this.form.attendanceGroupName = find.label;
		},
		pageListByEmployer(employerId) {
			pageListByEmployer({
				pageSize: 999,
				pageNum: 1,
				employerId,
			}).then((res) => {
				this.immediateSupervisorList = [
					{ employeeName: '无', id: '-1' },
					...res.data.records,
				];
				this.$forceUpdate();
			});
		},
		normalizer(node) {
			if (!node.children || (node.children && !node.children.length)) {
				delete node.children;
			}
			return {
				id: node.id,
				label: node.deptName,
				children: node.children,
			};
		},
		employerSelectChange(e) {
			this.form.employerName = e.label;
			this.getDeptTree(e.value);
			this.pageListByEmployer(e.value);
			this.getGroupList(e.value);
		},
		//计算工龄
		changeLegalSeniority() {
			let nowDay = moment().startOf('day').format('YYYY-MM-DD');
			this.form.legalSeniority = moment(nowDay).diff(
				this.form.firstTimeWork,
				'month'
			);
			this.$forceUpdate();
		},
		getGroupList(employerId) {
			getEmployerSalaryGroup({
				pageNum: 1,
				pageSize: 999,
				employerId,
			}).then((res) => {
				this.payGroupListOption = res.data.map((item) => {
					return {
						label: item.groupName,
						value: item.id,
					};
				});
			});
			getEmployerPerformanceGroup({
				pageNum: 1,
				pageSize: 999,
				employerId,
			}).then((res) => {
				this.performanceGroupOption = res.data.map((item) => {
					return {
						label: item.performanceGroupName,
						value: item.id,
					};
				});
			});
			getEmployerVacationGroup({
				pageNum: 1,
				pageSize: 999,
				employerId,
			}).then((res) => {
				this.vacationGroupOption = res.data.map((item) => {
					return {
						label: item.vacationGroupName,
						value: item.id,
					};
				});
				this.vacationGroupOption.unshift({label:'无',value:''})
			});
			getCheckWorkGroupList({
				pageNum: 1,
				pageSize: 999,
				employerId,
			}).then((res) => {
				this.checkWorkGroupOption = res.data.map((item) => {
					return {
						label: item.attendanceGroupName,
						value: item.attendanceGroupId,
					};
				});
				this.checkWorkGroupOption.unshift({label:'无',value:''})
			});
		},
		// 取消按钮
		cancel() {
			this.dialogFlag = false;
		},
		open(form) {
			if (form) {
				console.log('🐛 ~ open ~ form:', form);
				this.$set(this, 'form', form);
				// this.form.immediateSupervisor = '';
				if (form.fixedList) {
					this.fixedList = form.fixedList;
				}
				if (form.nonFixedList) {
					this.nonFixedList = form.nonFixedList;
				}
				this.getDeptTree(form.employerId);
				this.pageListByEmployer(form.employerId);
				this.getGroupList(form.employerId);
			} else {
				this.form = {
					seniority: '',
					confirmationDate: '',
				};
				this.nonFixedList = [];
				this.fixedList = [];
			}
			this.dialogFlag = true;
		},
		/*查询职位下拉数据*/
		getPositionList() {
			getPositionList({
				pageNum: 1,
				pageSize: 999,
			}).then((res) => {
				this.positionOptions = res.data.records.map((item) => {
					if (item.rankList && item.rankList.length) {
						item.rankList = item.rankList.map((rankItem) => {
							return {
								label: rankItem.rankName,
								value: rankItem.id,
							};
						});
					} else {
						item.rankList = [];
					}
					return {
						...item,
						label: item.positionName,
						value: item.id,
					};
				});
			});
		},
		/*设置职级数据*/
		getPositionGrade() {
			const findItem = this.positionOptions.find((item) => {
				return item.value == this.form.position;
			});
			console.log("🐛 ~ findItem ~ findItem:", findItem)
			this.positionGradeOptions = findItem ? findItem.rankDTOList : [];
			if(this.positionGradeOptions.findIndex(item=>item.id==this.form.empClass)== -1){
				this.form.empClass = '';
			}
			this.$forceUpdate();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.dialogFlag = true;
			this.title = this.$t('add_new_employee');
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.form.fixedList = this.fixedList;
					this.form.nonFixedList = this.nonFixedList;
					this.$emit('submit', this.form);
					this.dialogFlag = false;
				}
			});
		},
		/** 查询部门下拉树结构 */
		getDeptTree(data) {
			deptTreeSelect(data).then((response) => {
				this.deptOptions = response.data;
			});
		},
		//新增薪酬信息
		handleAddPayInfo(type) {
			this.$refs.payInfoEdit.handleAdd(type);
		},
		setPayInfoForm(form) {
			if (form.type == 1) {
				if (form.index != null) {
					this.$set(this.fixedList, form.index, form);
				} else {
					this.fixedList.push(form);
				}
			} else {
				if (form.index != null) {
					this.$set(this.nonFixedList, form.index, form);
				} else {
					this.nonFixedList.push(form);
				}
			}
		},
		//删除薪酬信息
		handleDeletePayInfo(index, type) {
			if (type == 1) {
				this.fixedList.splice(index, 1);
			} else {
				this.nonFixedList.splice(index, 1);
			}
		},
		//编辑薪酬信息
		handleUpdatePayInfo(row, index) {
			row.index = index;
			this.$refs.payInfoEdit.handleUpdate(row);
		},
		getStatusText(row) {
			if (row.expirationDate) {
				const newDataTime = new Date().getTime();
				const endDateTime = new Date(row.expirationDate).getTime();
				const startDateTime = new Date(row.effectiveDate).getTime();
				if (startDateTime > newDataTime) {
					return this.$t('not_effective');
				} else if (endDateTime > newDataTime) {
					return this.$t('in_effect');
				} else {
					return this.$t('expired');
				}
			} else {
				return this.$t('in_effect');
			}
		},
	},
};
</script>
<style lang="scss" scoped>
/* 给 treeselect 添加固定高度并启用溢出自动显示滚动条 */

::v-deep .vue-treeselect__menu {
	max-height: 200px !important; /* 设置菜单最大高度 */
	overflow-y: auto; /* 启用垂直滚动条 */
}
</style>
